<template>
    <div class="logins">
        <div class="cont mn">
            <div class="left">
                <img alt="" src="../assets/Frame-1540.png">
                <div class="info">
                    <div class="info-item">
                        <div class="ts">
                            120亿
                        </div>
                        <p>项目成交总额</p>
                    </div>

                    <div class="info-item">
                        <div class="ts">
                            999家
                        </div>
                        <p>累计入驻企业</p>
                    </div>

                    <div class="info-item">
                        <div class="ts">
                            9999个
                        </div>
                        <p>发布招标项目</p>
                    </div>

                </div>
            </div>
            <div class="right">
                <div class="nav">
                    <div :class="activeIndex == 0 ? 'nav-item active' : 'nav-item ' " @click="GetActiveUrl(0)">
                        供应商登录
                    </div>
                    <div :class="activeIndex == 1 ? 'nav-item active' : 'nav-item ' " @click="GetActiveUrl(1)">
                        工作账号登录
                    </div>
                </div>
                <div class="login">
                    <el-input v-model="login.account" placeholder="请输入账号"/>
                    <div class="h"></div>
                    <el-input v-model="login.password" placeholder="请输入密码" type="password"/>

                    <div class="tags">
                        <p v-if="activeIndex == 0">还没账号 <span @click="dialogVisible = true">注册账号</span></p>
                        <p style="color: #0083FE" @click="dialogVisible1 = true">忘记密码</p>
                    </div>
                    <div class="btns">
                        <el-button type="primary" @click="Submit()">登录</el-button>
                    </div>
                </div>
            </div>
        </div>


        <el-dialog v-model="dialogVisible" :before-close="handleClose" :close-on-click-modal="false" title="注册"
                   width="30%">
            <div class="reg">
                <el-input v-model="reg.account" placeholder="请输入账号"/>
                <div class="h"></div>

                <div class="code">
                    <el-input v-model="reg.code" placeholder="请输入验证码" style="width: 70%;margin-right: 10px;"></el-input>
                    <el-button v-show="show" @click="getCode">获取验证码</el-button>
                    <el-button v-show="!show" disabled type="info">{{ count }} 秒</el-button>

                </div>
                <div class="h"></div>
                <el-input v-model="reg.password" placeholder="请输入密码" type="password"/>
                <div class="h"></div>
                <el-input v-model="reg.suppername" placeholder="请输入供应商名称"/>
                <div class="h"></div>
                <el-select v-model="reg.cate" class="m-2" placeholder="请选择采购项目类型" size="large" style="width: 100%;">
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
                <div class="h"></div>
                <div class="ls" style="justify-content: space-between;display: flex">
                    <el-input v-model="reg.name" placeholder="请输入负责人姓名" style="width: 48%;"/>
                    <el-input v-model="reg.tel" placeholder="请输入负责人手机号" style="width: 48%;"/>
                </div>
                <div class="h"></div>
                <el-input v-model="reg.address" placeholder="请输入地址"/>
                <div class="h"></div>
                <div class="btns">
                    <el-button type="primary">登录</el-button>
                </div>
            </div>
        </el-dialog>


        <el-dialog v-model="dialogVisible1" :before-close="handleClose" :close-on-click-modal="false" title="忘记密码"
                   width="30%">
            <div class="reg">
                <el-input v-model="forget.account" placeholder="请输入账号"/>
                <div class="h"></div>

                <div class="code">
                    <el-input v-model="forget.code" placeholder="请输入验证码"
                              style="width: 70%;margin-right: 10px;"></el-input>
                    <el-button v-show="show" @click="getCode">获取验证码</el-button>
                    <el-button v-show="!show" disabled type="info">{{ count }} 秒</el-button>
                </div>
                <div class="h"></div>
                <el-input v-model="forget.password" placeholder="请输入密码" type="password"/>
                <div class="h"></div>
                <el-input v-model="forget.confirmPassword" placeholder="确定密码"/>
                <div class="h"></div>

                <div class="btns">
                    <el-button type="primary" @click="Submit()">登录</el-button>
                </div>
            </div>
        </el-dialog>

    </div>
</template>


<script setup>
/**
 * 组件引入
 */
import {onMounted, reactive, ref, computed} from 'vue'
import http from "../api/api.js"
import msg from "../utils/Message.js"
import Cookies from "js-cookie";
import {useRouter} from 'vue-router'

/**
 * 全局变量
 * @type {UnwrapNestedRefs<{count: string, list: *[]}>}
 */

const router = useRouter()

const options = reactive([
    {
        value: 'Option1',
        label: 'Option1',
    },
    {
        value: 'Option2',
        label: 'Option2',
    },
    {
        value: 'Option3',
        label: 'Option3',
    },
    {
        value: 'Option4',
        label: 'Option4',
    },
    {
        value: 'Option5',
        label: 'Option5',
    },
])

const activeIndex = ref(0)

const dialogVisible = ref(false)

const dialogVisible1 = ref(false)

var show = ref(true)

const login = reactive({
    account: "",
    password: ""
})

const forget = reactive({
    account: "",
    code: "",
    password: "",
    confirmPassword: ""
})

const reg = reactive({
    account: "",
    password: "",
    code: "",
    suppername: "",
    logo: "",
    lolgsrc: "",
    cate: 0,
    address: "",
    name: "",
    zhiwei: "",
    tel: "",

})

/**
 * 页面挂载后
 */
onMounted(() => {
    // initPageData();
});


/**
 * 方法区
 */

function GetActiveUrl(e) {
    activeIndex.value = e
}

// 初始化数据
const initPageData = () => {
    http.HttpGet("GetDocumentClassIndex").then((res) => {
        initData.loading = false
        if (res.code == 0) {
            initData.list = res.data
            msg.message(res.msg)
        } else {
            msg.message(res.msg, 'error')
        }
    })
}

function Submit(){
    router.go(-1)

}

function handleClose(done) {
    done();
}
</script>

<style lang="scss" scoped>
@import '../assets/scss/index.scss';

.logins {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: url("../assets/aaa.jpg") 0 0 no-repeat;
    background-size: cover;

}


</style>

